import React, { Component } from 'react'
import Taro, { getCurrentInstance } from '@tarojs/taro'
import { View, Image, Text, Swiper, SwiperItem } from '@tarojs/components'
import { SpImage } from '@/components'
import { classNames, linkPage } from '@/utils'
import { WgtPlateType } from './index'




import './jn-carousel.scss'

export default class WgtJnCarousel extends Component {
  static defaultProps = {
    info: null
  }
  constructor(props) {
    super(props)

    this.state = {
      currentDot: 0,
      curIdx: 0,
      index: 0
    }
  }

  static options = {
    addGlobalClass: true
  }

  handleClickItem = linkPage

  dotChange(e) {
    const { current } = e.detail
    this.setState({
      currentDot: current
    })
  }

  swiperChange = (e) => {
    const { current } = e.detail
    this.setState({
      curIdx: current
    })
  }

  render() {
    const { info } = this.props
    const { curIdx, index, currentDot } = this.state
    if (!info) {
      return null
    }
    const { base, data } = info
    return (
      <View className='wgt wgt-carousel'>
        <View className='wgt-carousel-title'>
          <Text className='wgt-carousel-title-text'>{base.title}</Text>
          <Text className='wgt-carousel-title-tag'>{base.subtitle}</Text>
        </View>

        <Swiper
          duration={300}
          className='wgt-carousel-swiper'
          onChange={this.dotChange.bind(this)}
          onAnimationFinish={this.swiperChange.bind(this)}
        >
          {data.map((i, ind) => { 
            return ind< (data.length/10)&&(
              <SwiperItem key={`swiper-item__${ind}`} className='wgt-carousel-item'>
                <View>
                  <View className='wgt-carousel-bd'>
                    {data.map((item, idx) => { 
                      return ((idx+1) <= (ind)*10 + 5 && (idx+1) > ((ind)*10) && (idx+1) > (ind-1)*10 )&&(
                        <View key={`wgt-carousel-bd__${idx}`} onClick={this.handleClickItem.bind(this, item)}>
                          <View className='nav-image'>
                            <SpImage src={item.imgUrl} lazyLoad mode='scaleToFill' height='100%' width='100%' />
                          </View>
                          <View  className='nav-item-content'>{ item.content }</View>
                        </View>
                      )
                    })}
                  </View>
                  <View className='wgt-carousel-bd'>
                    {data.map((item, idx) => { 
                      return ((idx+1) <= (ind)*10 + 10 && (idx+1) > ((ind)*10)+5 && (idx+1) > (ind-1)*10 )&&(
                        <View key={`wgt-carousel-bd__${idx}`} onClick={this.handleClickItem.bind(this, item)}>
                          <View className='nav-image'>
                            <SpImage src={item.imgUrl} lazyLoad mode='scaleToFill' height='100%' width='100%' />
                          </View>
                          <View  className='nav-item-content'>{ item.content }</View>
                        </View>
                      )
                    })}
                  </View>
                </View>
              </SwiperItem>
            )
          })}
        </Swiper>
        {data.length > 1 && (
          <View
            className={classNames(
              'slider-pagination',
              'center',
              'circle',
              'dark',
              'cover'
            )}
          >
            {data.map((dot, dotIdx) => dotIdx< (data.length/10)&&(
                <View
                  className={classNames('dot-item', { active: currentDot === dotIdx })}
                  key={`dot-item__${dotIdx}`}
                ></View>
              ))}
          </View>
        )}
      </View>
    )
  }
}

